<!--
* @description 论坛列表-手机端
* @fileName bbs_list.vue
* @author huangyu
* @date 2023/04/22 15:41:41
!-->
<template>
    <div>
        <van-nav-bar title="东方交流论坛" />
        <van-icon name="add" size="40" class="color_blue" v-if="token" style="position:fixed;right:10px;bottom:120px;z-index:10;" @click="clickAdd" />
        <van-pull-refresh v-model="isLoading">
            <van-cell-group>
                <van-cell v-for="(item,index) in list" :key="index" is-link :to="`/game/zx/bbs/detail?id=${item._id}`">
                    <template #title>
                        <span :class="item.topNumber>0?'color_danger':''">{{item.title}}</span>
                        <van-tag type="danger" plain  size="mini" v-if="item.topNumber>0">置顶</van-tag>
                        <van-tag type="warning" plain  size="mini" v-if="item.zanNumber>15">热门</van-tag>
                    </template>
                    <template #right-icon>
                        <div class="color_blue" v-if="item.type==5||item.type==2">{{item.typeStr}}</div>
                        <div class="color_warning" v-else>{{item.typeStr}}</div>
                    </template>
                    <template #label>
                        <div>作者：{{item.gameName}} / {{item.createTime | formatDate}}</div>
                        <div v-if="item.lastGameName">最后发表：{{item.lastGameName}} / <span class="color_gray">{{item.lastReplyTime | formatDate2}}</span></div>
                        <div>回复数：{{item.replyCount}}</div>
                        <div v-if="powerBBS">
                            <el-tag type="warning" size="mini" plain @click="clickUpdate(item,'top')">置顶{{item.topNumber}}</el-tag>
                            <el-tag type="warning" size="mini" plain @click="clickClearTop(item._id)" v-if="item.topNumber>0">取消置顶</el-tag>
                            <el-tag type="danger" size="mini" plain @click="clickUpdate(item,'del')">删除</el-tag>
                        </div>
                    </template>
                </van-cell>
            </van-cell-group>
        </van-pull-refresh>
        <van-pagination v-if="total>20" v-model="pageindex" :total-items="total" :items-per-page="pagesize" @change="changePage" />


        <van-dialog v-model="dialogBbsAdd" title="新增帖子" :showConfirmButton="false" :closeOnClickOverlay="true">
            <van-form @submit="submitAdd" label-width="4em">
                <van-field name="radio" label="类型">
                    <template #input>
                        <van-radio-group v-model="form.type" direction="horizontal">
                        <van-radio :name="1">八卦闲聊</van-radio>
                        <van-radio :name="2">东方需求</van-radio>
                        <van-radio :name="3">东方攻略</van-radio>
                        <van-radio :name="4">心得交流</van-radio>
                        <van-radio :name="5">东方活动</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <van-field
                    v-model="form.title"
                    label="标题"
                    placeholder="请输入标题"
                />
                <van-field
                    v-model="form.content"
                    rows="1"
                    :autosize="{minHeight:100}"
                    label="内容"
                    type="textarea"
                    placeholder="请输入内容"
                />
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">立即发布</van-button>
                </div>
            </van-form>
        </van-dialog>
    </div>
</template>

<script>
import { get } from '@/common/app.js'
import { formatDate } from '@/common/unit.js'
import { Toast } from 'vant';
export default {
    components: {  },
    data() {
        return {
            token: this.$store.state.token,
            isLoading: false,
            list: [],
            dialogBbsAdd: false,

            form: {
                type: 1,
                title: "",
                content: "",
            },

            pageindex: 1,
            pagesize: 20,
            total: 0,

            powerBBS: this.$power.roleAction('bbs'),
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        clickAdd(){
            if(this.token){
                this.dialogBbsAdd = true
            }else{
                Toast.fail("请先登录!")
            }
        },
        submitAdd(){
            let params = {
                type: 'getBbs',
                api: 'api-bbs-add',
                token: this.token,
                data: this.form,
            }
            get('game', params).then(res => {
                if (res) {
                    Toast.success("新增帖子成功！")
                    this.dialogBbsAdd = false
                    this.getData()
                }
            })
        },
        getData(){
            let params = {
                type: 'getBbs',
                api: 'api-bbs-list',
                data: {
                    pageIndex: this.pageindex,
                    pageSize: this.pagesize,
                },
            }
            get('game', params).then(res => {
                if (res) {
                    console.log(res)
                    this.list = res.list
                    this.total = res.total
                }
            })
        },
        changePage(value){
            this.pageIndex = value
            this.getData()
        },
        // 置顶、删除功能操作
        clickUpdate(row,value){
            if(!this.token){
                Toast.fail("未登录，不能操作！")
                return;
            }
            let params = {
                type: 'getBbs',
                api: 'api-bbs-update',
                token: this.token,
                data: {
                    type: value,
                    _id: row._id,
                    topNumber: 1,
                    zanNumber: 1,
                    status: -1,
                },
            }
            get('game', params).then(res => {
                if (res) {
                    Toast.success("操作成功")
                    this.getData()
                }
            })
        },
        // 取消置顶
        clickClearTop(_id){
            let params = {
                type: 'getBbs',
                api: 'api-bbs-update-clear-top',
                token: this.token,
                data: {
                    _id: _id,
                },
            }
            get('game', params).then(res => {
                if (res) {
                    Toast.success("操作成功")
                    this.getData()
                }
            })
        },
        addSuccess(){
            this.dialogBbsAdd = false
            this.getData()
        }
    },
    filters: {
        formatDate(time) {
            var date = new Date(time);
            let res = formatDate(date, "yy-MM-dd");
            return res;
        },
        formatDate2(time) {
            var date = new Date(time);
            let res = formatDate(date, "yy-MM-dd hh:mm:ss");
            return res;
        },
    }
}
</script>

<style scoped>
.bbsTitle:hover{color:#409EFF;text-decoration: underline;}
</style>